<template>
    <div class="shoppingcart" v-if="scdata">
        <div class="width-center">
            <!-- 头部导航部分 -->
            <Search></Search>
            <!-- 全部商品 -->
            <div class="commodity">
                <span>全部商品</span>
                <span class="numred">{{AllgoodsproductCount}}</span>
            </div>
            <!-- 商品内容部分 -->
            <div class="content" v-if="scdata.productCount != 0">
                <!-- 全选，删除 -->
                <div class="addselect">
                    <Checkbox
                        v-model="checkAll"
                        @on-change="handleCheckAll">
                    </Checkbox>
                    <span class="qx">全选</span>
                    <span class="del" @click="delALL">删除</span>
                </div> 
                <!-- 商品 -->
                <div class="merchandise"  v-for="(items,indexs) in scdata.shoppingCartList" :key="indexs">
                    <div class="shoppingCartname">
                        <Checkbox class="toptwo"
                        v-model="items.showFlag"
                        @on-change="checksecond(items)"
                        >
                        </Checkbox>
                        <span>{{items.brandName}}</span>
                    </div>
                    <!-- 商品详情 -->
                    <div class="mer-conter">
                        <div class="mer-head">
                            <ul class="distance">
                                <li>商品</li>
                                <li>规格／型号</li>
                                <li>单价</li>
                                <li>数量</li>
                                <li>小计</li>
                            </ul>
                        </div>
                        <div class="false" v-for="(item,index) in items.shoppingCart" :key="index">
                            <div class="mer-body">
                                <ul>
                                    <li>
                                        <p class="pi">{{item.proName}}</p>
                                        <Checkbox  class="picthree"
                                        v-model="item.showFlag"
                                        @on-change="checkthree(items,item)"></Checkbox>
                                        <div class="img" :style="`background-image:url(${item.proUrl})`"></div>
                                    </li>
                                    <li>{{item.proInfo}}mm</li>
                                    <li>￥{{item.sPrice}}</li>
                                    <li>{{item.commodityNum}}</li>
                                    <li>¥{{item.proAmount}}</li>
                                    <li><span @click="del(item.shoppingcartId,items.brandId)">删除</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>         
                </div>
                <!-- 删除弹框 -->
                <Modal :content="qxmsg" :visible.sync="wicketcl" @determine="qdscdel(itemid,itemsid)"></Modal>
                <!-- 底部合计 -->
                <div class="mer-foot">
                    <div class="mer-total">
                        <div class="mer-money">
                            <span class="fontbig">¥ {{allmoneyshow}}</span><p>共<span>{{shopnum}}</span>件商品，总计 </p>
                        </div>
                        <div class="close" @click="jsclose">结算</div>
                    </div>
                </div>
                <!-- 结算弹窗 -->
                <div class="accoun" v-if="account">
                    <div class="accoun-content">
                        <div class="accoun-head">
                            <span>合伙人验证</span>
                            <Icon type="android-close" class="acoheadl" @click.native="account = false"></Icon>
                        </div>
                        <p class="accphone">手机号验证码</p>
                        <div class="accverify">
                            <input type="text" placeholder="请输入验证码">
                            <button class="span" :disabled="disabled" @click="getCode">{{countdown}}</button>
                        </div>
                        <div class="yamjudge">
                            <Icon type="minus-circled" class="yamjj"></Icon>
                            验证码输入错误，请重新输入！
                        </div>
                        <div class="choosbutton">
                            <div class="qxan" @click="account = false">取消</div>
                            <div class="qdan">确定</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 购物车没商品显示小猪 -->
            <div class="shoppingpig" v-if="scdata.productCount == 0">
                <img src="../assets/img/pig.png">
                <p>您的购物车快饿瘪了，快给我挑点宝贝吧~</p>
                <div class="pigbutton" @click="skipindex">
                    去溜达
                </div>   
            </div>
        </div>
    </div>
</template>
<script>
import { Icon , CheckboxGroup ,Checkbox,Input } from "iview";
import Search from "../components/search"
import Modal from "../components/modal"
import { shoppingcart,shoppingcartdel} from "../http/api" 
export default {
    components:{
        Icon,
        Input,
        CheckboxGroup,
        Checkbox,
        Search, //搜索框
        Modal   //删除弹框
    },
     data() {
        return {
            scdata:null,       //总数据
            ALLproductCount:0, //全部商品
            wicketcl:false,    //弹出框
            account:false,     //结算弹窗
            checkAll: false,   //全选
            secondArr:[],      //二级商店数组
            threeArr:[],       //三级商店数组
            delArr:[],         //物品删除数组
            ALLmoney:0,     //结算的钱
            shopnum:0,         // 选择商品件数
            delstatus:0,       //全选删除状态
            time:0,
            qxmsg:"确认要删除该商品？",
            itemid:'',
            itemsid:'',
            arraccount:[],     //点击结算时候需要传的数组
            objectaccount:{}   //数组里面需要传的对象
        };
    },
    computed: {
        countdown: function() {
            return this.time > 0 ? `${this.time}s后重新获取` : "获取验证码";
        },
        disabled: function() {
            return this.time > 0 ? true : false;
        },
        //全部商品
        AllgoodsproductCount: function() {
            return this.ALLproductCount
        },
        //展示的总计
        allmoneyshow:function() {
            if(this.ALLmoney == 0){
                return this.ALLmoney + ".00"
            }else{
                return this.ALLmoney.toFixed(2)
            }
        }
    },
    methods:{
        api_shoppingcart () {
            shoppingcart().then(res =>{
                if(res.data.status == "1001"){
                    // this.$router.push({path:"/login"})
                }else{
                    this.scdata = res.data
                    this.ALLproductCount = res.data.productCount
                }  
            })
        }, 
        //全选功能
        handleCheckAll () {
            // 点击后，如果全选状态是true，先把两个数组清空，再push所有id
            if(this.checkAll){
                this.secondArr = []  
                this.threeArr = []
                this.ALLmoney = 0
                this.shopnum = 0
                this.arraccount = []
                this.scdata.shoppingCartList.map((items,idxs) => {
                    items.showFlag = true
                    this.secondArr.push(items.brandId)
                    items.shoppingCart.map((item,index) => {
                        item.showFlag = true
                        this.threeArr.push(item.shoppingcartId)
                        this.ALLmoney +=  parseFloat(item.proAmount) //结算金钱
                        this.shopnum += item.commodityNum
                        //点击结算需要传递的数组
                        this.arraccount.push({"proCode":item.proCode,commodityNum:item.commodityNum}) 
                    })
                })
            }else {
                // 点击后，如果全选是flase,让所有状态变成false，数组清空
                this.scdata.shoppingCartList.map((items,idxs) => {
                    items.showFlag = false
                    items.shoppingCart.map((item) => {
                        item.showFlag = false
                        this.ALLmoney = 0  //结算清空
                    })
                })
                this.arraccount = []  //点击结算需要传递的数组
                this.secondArr = []
                this.threeArr = []
                this.shopnum = 0
            }
            // console.log(this.threeArr)
            // console.log(this.arraccount)
        },
        // 二级联动
        checksecond (items) {
            // 点击后，如果状态是false,取消掉2级数组和3级数组里面的id,状态都变成false
            if(!items.showFlag){
                this.secondArr.splice(this.secondArr.indexOf(items.brandId),1)
                items.shoppingCart.map((item,index) =>{
                    this.threeArr.splice(this.threeArr.indexOf(item.shoppingcartId),1)
                    item.showFlag = false
                    this.ALLmoney -=  parseFloat(item.proAmount) 
                    this.shopnum -= item.commodityNum
                })
                this.checkAll = false    
                //点击结算要传的数组
                this.arraccount = []
                this.scdata.shoppingCartList.map((lists,lindexs) =>{
                    lists.shoppingCart.map(list =>{
                        if(list.showFlag){
                            this.arraccount.push({"proCode":list.proCode,commodityNum:list.commodityNum})    
                        }
                    })  
                })       
                //如果一个也没选中，allmonety是0  是为了解决浮点数bug
                if(this.arraccount.length == 0){
                    this.ALLmoney = 0
                }
            }else{
                // 如果状态是true需要判断
                // 如果2级数组没有这个id的话再push，
                if(this.secondArr.indexOf(items.brandId)== -1){
                    this.secondArr.push(items.brandId)
                }
                // 如果二级数组长度等于总数组长度，全选按钮状态为true
                if(this.scdata.shoppingCartList.length == this.secondArr.length){
                    this.checkAll = true
                }
                // 遍历后如果三级数组里面没有3级id的时候再push
                items.shoppingCart.map((item,index) =>{
                    if(this.threeArr.indexOf(item.shoppingcartId)== -1){
                        this.threeArr.push(item.shoppingcartId)
                        this.shopnum += item.commodityNum
                    }
                    if(!item.showFlag){
                        this.ALLmoney +=  parseFloat(item.proAmount) 
                    }
                    item.showFlag = true
                    
                })
                //点击结算要传的数组
                this.arraccount = []
                this.scdata.shoppingCartList.map((lists,lindexs) =>{
                    lists.shoppingCart.map(list =>{
                        if(list.showFlag){
                            this.arraccount.push({"proCode":list.proCode,commodityNum:list.commodityNum})    
                        }
                    })  
                }) 
            }       
            // console.log(this.arraccount)
        },
        // 三级联动
        checkthree (items,item) {
            if(item.showFlag){
                this.threeArr.push(item.shoppingcartId)
                let flag = true
                items.shoppingCart.map(el => {
                    if(!el.showFlag){
                        flag = false
                        return
                    }
                })
                items.showFlag = flag
                if(flag){
                    this.secondArr.push(items.brandId)
                }
                this.ALLmoney +=  parseFloat(item.proAmount) 
                this.shopnum += item.commodityNum
                //点击结算要传的数组
                this.arraccount = []
                this.scdata.shoppingCartList.map((lists,lindexs) =>{
                    lists.shoppingCart.map(list =>{
                        if(list.showFlag){
                            this.arraccount.push({"proCode":list.proCode,commodityNum:list.commodityNum})    
                        }
                    })  
                })  
            }else {
                items.showFlag = false
                this.checkAll = false
                this.threeArr.splice(this.threeArr.indexOf(item.shoppingcartId),1)
                this.secondArr.splice(this.secondArr.indexOf(items.brandId),1)
                let flag = true
                items.shoppingCart.map(el => {
                    if(el.showFlag){
                        flag = false
                        return
                    }
                })
                this.ALLmoney -=  parseFloat(item.proAmount) 
                this.shopnum -= item.commodityNum
                //点击结算要传的数组
                this.arraccount = []
                this.scdata.shoppingCartList.map((lists,lindexs) =>{
                    lists.shoppingCart.map(list =>{
                        if(list.showFlag){
                            this.arraccount.push({"proCode":list.proCode,commodityNum:list.commodityNum})    
                        }
                    })  
                }) 
            }     
            let  showFlagnum = 0 
            this.scdata.shoppingCartList.map(el => {
                if(el.showFlag){
                    showFlagnum++
                }
                if(this.scdata.shoppingCartList.length == showFlagnum){
                    this.checkAll = true
                } else {
                    this.checkAll = false
                }
            })  
            // console.log(this.arraccount)
            //如果一个也没选中，allmonety是0  是为了解决浮点数bug
            if(this.arraccount.length == 0){
                this.ALLmoney = 0
            }
        },
        // 整体删除
        delALL () {
            // 到时候把当前的this.threeArr给后台
            this.delstatus = 1
            this.wicketcl = true
        },
        // 删除
        del (itemid,itemsid) {
            this.wicketcl = true
            this.itemid = itemid
            this.itemsid = itemsid
        },
        // 删除选项
        qdscdel (itemid, itemsid) {
            // 这个是全选的删除
            if(this.delstatus == 1){        
                shoppingcartdel({operationType:"delete",shoppingCarts:this.threeArr}).then(res =>{
                    if(res.data.status == 1000){
                        this.api_shoppingcart()
                        this.ALLmoney = 0
                        this.shopnum = 0
                        this.checkAll = false
                        this.delstatus = 0
                        this.threeArr = []
                        this.secondArr = []
                        this.$store.commit('shopcar')
                    }
                })
            }else{
                shoppingcartdel({operationType:"delete",shoppingCarts:itemid}).then( response=>{
                    if(response.data.status == 1000){
                        shoppingcart().then(response =>{
                            this.ALLproductCount = response.data.productCount
                            // console.log(this.ALLproductCount)
                            this.$store.commit('shopcar')
                        })
                    }
                })
            }
            this.scdata.shoppingCartList.map((items,indexs) =>{         
                items.shoppingCart.map((item,index) =>{
                    if(item.shoppingcartId == itemid){
                        if(item.showFlag){
                            this.ALLmoney -=  parseFloat(item.proAmount) 
                            this.shopnum -= item.commodityNum
                        }               
                        items.shoppingCart.splice(index,1)                    
                    }
                    if(items.shoppingCart.length == 0){
                        this.scdata.shoppingCartList.splice(indexs,1)
                    }
                })
                // this.ALLproductCount += items.shoppingCart.length 
                // console.log(this.ALLproductCount)
            })
            this.wicketcl = false
        },
        //获取验证码
                //获取验证码
        getCode () {
            this.time = 60;
            let timer = null;
            timer = setInterval(() => {
                this.time--;
                if (this.time < 0) {
                    clearInterval(timer);
                }
            }, 1000);
        },
        //如果购物车没东西出现小猪，跳转首页
        skipindex () {
            this.$router.push({path:"/index"})
        },
        // 底部结算按钮
        jsclose () {
            // console.log(this.arraccount)
            if(this.scdata.status != 1000){
                this.$router.push({path:"/login"})
            }
            // this.account = true
            if(this.shopnum == 0){
                this.$Message.success({
                    content: "请您选择商品！",
                    duration: 1.5
                });
            }else{
                //进入下个页面有一个一次性30分钟提示弹窗，传入tishi来控制
                this.$router.push({path:"/submitorder",query:{confirmInfo:JSON.stringify(this.arraccount),tishi:1}})
            }
        }
    },
    created () {
        this.api_shoppingcart()
        // shoppingcartdel({operationType:"insert",brandId:1,proId:3,proCode:"SA33057000052"})
    }
}
</script>
<style lang="less">
@import "../assets/styles/shoppingcart.less";
</style>
